﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<head>
	<link rel="stylesheet" href="${ctxStatic}/kitadmin/css/global.css" media="all">
	<link rel="stylesheet" href="${ctxStatic}/kitadmin/plugins/font-awesome/css/font-awesome.min.css">
</head>

<body>
	<div style="margin: 15px;">
		<blockquote class="layui-elem-quote">
			<h1>Laytpl + Laypage结合动态渲染数据并分页</h1></blockquote>
		<fieldset class="layui-elem-field">
			<legend>演示</legend>
			<div class="layui-field-box">
				<div>
					<form>
						<input type="text" name="name" />
						<button type="button" id="search">搜索</button>
					</form>
					<table class="site-table table-hover">
						<thead>
							<tr>
								<th><input type="checkbox" id="selected-all"></th>
								<th>姓名</th>
								<th>年龄</th>
								<th>创建时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<!--内容容器-->
						<tbody id="con">
							<tr>
								<td><input type="checkbox"></td>
								<td>Layui</td>
								<td>Beginner</td>
								<td>2016-11-16 11:50</td>
								<td>
									<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
									<a href="/manage/article_edit_1" class="layui-btn layui-btn-mini">编辑</a>
									<a href="javascript:;" data-id="1" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
								</td>
							</tr>
						</tbody>
					</table>
					<!--分页容器-->
					<div id="paged"></div>
				</div>
				<pre class="layui-code">
					//示例代码
					layui.config({
base: 'js/'
}).use(['paging', 'code'], function() {
layui.code();
var $ = layui.jquery,
	paging = layui.paging();
paging.init({
	url: 'datas/laytpl_laypage_data.json', //地址
	elem: '#con', //内容容器
	params: { //发送到服务端的参数
		t: Math.random(),
		action: 'GetXxx'
	},
	tempElem: '#conTemp', //模块容器
	pageConfig: { //分页参数配置
		elem: '#paged', //分页容器
		pageSize: 3 //分页大小
	},
	success: function() { //渲染成功的回调
		//alert('渲染成功');
	},
	fail: function(msg) { //获取数据失败的回调
		//alert('获取数据失败')
	},
	complate: function() { //完成的回调
		//alert('处理完成');
	},
});
});
//ps:服务端是永远可以获取到pageIndex  和 pageSize 这两个参数的
					</pre>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field">
			<legend>参数</legend>
			<div class="layui-field-box">
				<table class="layui-table">
					<thead>
						<tr>
							<th>属性名称</th>
							<th>类型</th>
							<th>默认值</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td style="text-align: center;">url</td>
							<td style="text-align: center;">string</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>远程URL</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">type</td>
							<td style="text-align: center;">string</td>
							<td style="text-align: center;">POST</td>
							<td>
								<p>请求的方式，可选参数：GET、POST</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">elem</td>
							<td style="text-align: center;">string</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>内容容器. 1/id选择器 : #id 2/类选择器：.class</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">params</td>
							<td style="text-align: center;">object</td>
							<td style="text-align: center;">null</td>
							<td>
								<p>请求附带的参数</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">tempElem</td>
							<td style="text-align: center;">string</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>模板容器. 1/id选择器 : #id 2/类选择器：.class</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">tempElem</td>
							<td style="text-align: center;">string</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>模板容器. 1/id选择器 : #id 2/类选择器：.class</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">tempType</td>
							<td style="text-align: center;">number</td>
							<td style="text-align: center;">0</td>
							<td>
								<p>模版的获取方式：0为提供选择器给组件获取，1为直接提供模板字符串<i style="color:red;">v1.0.2+</i></p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">pageConfig</td>
							<td style="text-align: center;">object</td>
							<td style="text-align: center;"></td>
							<td>
								<p>参数说明</p>
								<blockquote class="layui-elem-quote">注意：参数<span style="color: #FF5722;"> paged </span>为<span style="color: #5FB878;"> true </span>时才生效</blockquote>
								<p>elem：分页容器. 1/id选择器 : #id 2/类选择器：.class</p>
								<p>pageSize：分页大小. 默认为15</p>
								<p>其他，与laypage组件一至，请参考：
									<a href="http://www.layui.com/doc/modules/laypage.html" target="_blank">http://www.layui.com/doc/modules/laypage.html</a>
								</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">success</td>
							<td style="text-align: center;">function</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>渲染成功后的回调方法</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">fail</td>
							<td style="text-align: center;">function</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>获取数据失败后的回调方法</p>
								<blockquote class="layui-elem-quote">fail:function(msg){}</blockquote>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">complate</td>
							<td style="text-align: center;">function</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>渲染完成后的回调方法（无论渲染成功与否，此回调都会执行）</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">serverError</td>
							<td style="text-align: center;">function</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>服务器发生错误时的回调方法</p>
								<blockquote class="layui-elem-quote">serverError:function(xhr,status,error){}</blockquote>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">renderBefore</td>
							<td style="text-align: center;">function</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>数据渲染之前发生 v0.2.0+</p>
								<blockquote class="layui-elem-quote">
									serverError:renderBefore(html, function (formatHtml) {});
								</blockquote>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field">
			<legend>方法</legend>
			<div class="layui-field-box">
				<table class="layui-table">
					<thead>
						<tr>
							<th>名称</th>
							<th>参数说明</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td style="text-align: center;">get</td>
							<td style="text-align: center;">
								<p>参数名：options</p>
								<p>类型：object</p>
							</td>
							<td>
								<p>要发送到服务端的参数</p>
								<p>示例</p>
								<p>
									<pre class="layui-code">
									//调用get方法获取数据
									paging.get({
										name: '张三', //获取输入的关键字。
										date:'2016-11-11'
									});
									</pre>
								</p>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field">
			<legend>数据结构</legend>
			<div class="layui-field-box">
				<p>请严格按照以下数据结构设置数据</p>
				<pre class="layui-code">
					{
"rel": true,
"msg": "获取成功",
"list": [
	{
		"name": "张三",
		"age":21,
		"createtime": "2017-01-10 10:42:36"
	},
	{
		"name": "李四",
		"age":31,
		"createtime": "2017-01-10 10:42:36"
	},{
		"name": "王五",
		"age":23,
		"createtime": "2017-01-10 10:42:36"
	},{
		"name": "赵六",
		"age":18,
		"createtime": "2017-01-10 10:42:36"
	}
],
"count": 57
}
			</pre>
			</div>
		</fieldset>
	</div>
	<!--模板-->
	<script type="text/html" id="conTemp">
		{{# layui.each(d.list, function(index, item){ }}
		<tr>
			<td><input type="checkbox"></td>
			<td>{{ item.name }}</td>
			<td>{{ item.age }}</td>
			<td>{{ item.createtime }}</td>
			<td>
				<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
				<a href="/manage/article_edit_1" class="layui-btn layui-btn-mini">编辑</a>
				<a href="javascript:;" data-id="1" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
			</td>
		</tr>
		{{# }); }}
	</script>
<%--
	<script type="text/javascript" src="plugins/layui/layui.js"></script>
--%>
	<script>
		layui.config({
			base: '${ctxStatic}/kitadmin/js/'
		}).use(['paging', 'code'], function() {
			layui.code();
			var $ = layui.jquery,
				paging = layui.paging();

			paging.init({
				openWait: true,
				url: '${ctxStatic}/kitadmin/datas/laytpl_laypage_data.json?v=' + new Date().getTime(), //地址
				elem: '#con', //内容容器
				type:'post',
				params: { //发送到服务端的参数
					t: Math.random(),
					token:'F8F5AE2137BFAEF77FF7408476AF6C64',
					pageIndex: 1
				},
				type:'GET',
				tempElem: '#conTemp', //模块容器
				pageConfig: { //分页参数配置
					elem: '#paged', //分页容器
					pageSize: 3 //分页大小
				},
				success: function() { //渲染成功的回调
					//alert('渲染成功');
				},
				fail: function(msg) { //获取数据失败的回调
					//alert('获取数据失败')
				},
				complate: function(res) { //完成的回调
					//alert('处理完成');
					console.log(res);
				},
			});
			//搜索
			$('#search').on('click', function() {
				var $this = $(this);
				var name = $this.prev('input[name=name]').val();
				if(name === '' || name.length === 0) {
					layer.msg('请输入关键字！');
					return;
				}
				//调用get方法获取数据
				paging.get({
					t: Math.random(),
					name: name //获取输入的关键字。
				});
			});
		});
	</script>
</body>
